<template>
  <div class="mains">
    <div class="loginbox">
      <div class="tips">Hi！欢迎使用</div>
      <div class="tips1">农场管理系统</div>
      <el-form :model="info" :rules="rules" ref="ruleForm" hide-required-asterisk label-width="" class="demo-ruleForm">
        <el-form-item label="" prop="name" style="width: 100%;">
          <el-input v-model="info.name"  placeholder="用户名"><i slot="prefix"
              style="font-size: 42px;color:#67C23A ;" class="el-icon-user-solid"></i></el-input>
        </el-form-item>
        <el-form-item label="" prop="pwd" style="width: 100%;">
          <el-input v-model="info.pwd" type="password"  placeholder="密码"><i slot="prefix"
              style="font-size: 42px;color:#67C23A ;" class="el-icon-s-flag"></i></el-input>
        </el-form-item>
        <el-form-item label="" prop="code" style="width: 100%;" class="code-item">
          <el-input v-model="info.code" type="text"  placeholder="验证码">
            <i slot="prefix" style="font-size: 42px;color:#67C23A ;" class="el-icon-question"></i>
          </el-input>
          <div @click="getCode"><identify :identifyCode="identifyCode" ></identify></div>
        </el-form-item>
        <el-form-item style="width: 100%;">
          <el-button type="success" @click="submitForm('ruleForm')" class="bth">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import identify from "@/components/identify";
import { captchaImage, login } from "./util/api.js"
export default {
  components: {
    identify
  },
  data() {
    return {
      info: {
        name: "13895674789",//13895674789
        pwd: "123456",//123456
        code: "",
        uuid: ""
      },
      rules: {
        name: [
          { required: true, message: '请输入账号', trigger: 'blur' },
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        code:[
        { required: true, message: '验证码', trigger: 'blur' },
        ]
      },
      identifyCode: ""
    }
  },
  mounted() {
    this.getCode()
    window.addEventListener('keydown', this.keyDown)
  },
  beforeDestroy(){
    window.removeEventListener('keydown', this.keyDown, false)
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await login(this.info)
          if (res.code != 200) {
            this.$message.error(res.msg)
            this.getCode()
          } else {
            window.sessionStorage.setItem("name", res.data.name)
            window.sessionStorage.setItem("roleName", res.data.departmentName)
            window.sessionStorage.setItem("token", res.data.token)
            window.sessionStorage.setItem("headImgUrl", res.data.headImgUrl)
            window.sessionStorage.setItem('routes', JSON.stringify(res.data.resourceChildren))
            this.$router.push({ path: '/home' })
          }
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
    },
    async getCode() {
      let res = await captchaImage()
      if (res.code != 200) return
      this.info.uuid = res.uuid
      this.identifyCode = res.captcha
    },
    keyDown(e){
      // console.log(e)
      //回车则执行登录方法
      if (e.keyCode == 13) {
        this.submitForm('ruleForm')
      }
    }
  }
}
</script>
<style lang="less" scoped>
@font-face {
  font-family: "SC-xie";
  src: url('./assets/logins.woff');
  font-weight: normal;
  font-style: normal;
}

.demo-ruleForm {
  width: 100%;
  margin-top: 80px;
  .el-form-item {
    margin: 20px 0;
  }
}
.bth{
  width: 40%;
  height: 35px;
  margin-left: 30%;
  margin-top: 10px;
}
*,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.mains {
  width: 100%;
  height: 100%;
  background-image: url('./assets/615158eb6df609344.png');
  background-size: 101% 101%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loginbox {
  width: 440px;
  height: 550px;
  padding: 20px 60px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}



/deep/.el-input__inner {
  outline-color: invert;
  outline-style: none;
  outline-width: 0px;
  border: none;
  border-style: none;
  text-shadow: none;
  outline-color: transparent;
  border-bottom: 1px rgba(246, 246, 246, 0.8) solid;
  box-shadow: none;
  background: none;
  padding-left: 10px;
  font-size: 18px;
  padding-bottom: 10px;

}

/deep/.el-input__prefix {
  left: -40px;
}

/deep/.el-input__inner::placeholder {
  font-size: 16px;
}


.tips {
  font-size: 22px;
  font-weight: 600;
  font-family: 'SC-xie';
  color: #67C23A;
}

.tips1 {
  font-size: 32px;
  font-weight: 600;
  margin-top: 10px;
  color: #67C23A;
  font-family: 'SC-xie';
}</style>